<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" @click="goBack()"></a>
			<h1 class="mui-title">小鹿头条</h1>
		</header>
		<div id="news-list" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view ">
					<template v-for="(item,$index) in news_list">
						<li class="mui-table-view-cell">
							<router-link :to="{name:'Newsinfo',params:{data:item}}" >
								<img src="../../../../static/banner.jpg" class="mui-media-object mui-pull-left news-img">
								<div class="mui-media-body news-info">
									<p class="news-info-title">{{item.title}}</p>
									<p class="news-times">{{item.updateTime|getday}}</p>
								</div>
							</router-link>
						</li>
					</template>
					
				</ul>
				<app-loading-more v-if="loading_more"></app-loading-more>
			</div>
		</div>
	</div>
</template>
<script>
	import {api} from '../../../gloabl/api.js'
	import {getTimeDay} from '../../../gloabl/common.js'
	import loadingMore from '../../../components/public/LoadMore.vue'
	export default{
		data:function(){
			return{
				news_list:[],
				page:0,
				page_size:10,
				is_next_have:true,
				loading_more:false
			}
		},
		components:{
			'app-loading-more':loadingMore
		},
		mounted:function(){
			let me = this;
			
			me.$nextTick(function(){
				mui.init({
					swipeBack:true,
					pullRefresh:{
						container: '#news-list',
						up:{
							auto:true,
							contentnomore:'没有更多数据了',
							contentrefresh : "正在加载...",
							callback:this.pullUplist
						}
					}
				})
			})
			
		},
		created:function(){
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
				item=mui.hooks.inits[i];
				if(item.name=="pullrefresh"){
					item.repeat=true;
				}
			}
		},
		methods:{
			pullUplist(){
				if(!this.is_next_have){
					return;
				}
				
				let vm = this;
				vm.page = vm.page+1;
				vm.loading_more = true;
				let getNewsListApi = '{'+api.getNewsListApi(vm.page,vm.page_size)+'}';//获取新闻
				vm.$http.post(url.graphql,{query:getNewsListApi})
				.then((res)=>{
					
					let data = res.data.data.listNews;
					if(!data.length){
						vm.is_next_have=false;
					}
					for (let item of data) {
						vm.news_list.push(item)
					}
					setTimeout(function(){
						vm.loading_more = false;
					},2000)
					mui('#news-list').pullRefresh().endPullupToRefresh();
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			}
		},
		filters:{
			getday(val){
				return getTimeDay(val);
			}
		}
	}
</script>
<style scoped="scoped">
	.news-a{
		width: 100%;
		overflow: hidden;
	}
	.news-info-title{
		color: #333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 14px;
		text-align: left;
	}
	.news-info{
		text-align: left;
		height: 82px;
		position: relative;
	}
	.news-times{
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 11px;
		color: #999999;
	}
	.news-img{
		height: 82px;
		width: 109px;
		max-width: 109px;
		border-radius: 2px;
	}
	.box-news-title{
		padding: 12.5px 0;
		padding-bottom: 0;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.box-title-text{
		width: 100%;
		overflow: hidden;
		border-left: 2px solid #F08800;
	}
	.title-text-content{
		padding-left: 10px;
		font-size: 16px;
		color: #333333;
		font-weight: 600;
	}
	.more{
		font-size: 12px;
		color: #666666;
	}
	.box-title-text
	.mui-icon{
		font-size: 16px;
		color: #666666;
	}
</style>